<template>
	<view>
		<view class="fashin_head">
			<view class="fashin_head_item">
				<text>{{sum}}</text>
				<text>团队人数</text>
			</view>
			<view class="fashin_head_item">
				<text>{{count}}</text>
				<text>今日完善信息人数</text>
			</view>
		</view>
		<template v-if="fans.length>0"> 
			<view class="fashinList-item" v-for="(item,index) in fans" :key="item.phone">
				<view class="item_1">
					<text>{{item.phone}}</text>
					<text>+{{item.fansNumber}}</text>
				</view>
				<view class="item_1">
					<text>{{item.userName}}({{item.phone}})</text>
					<text>今日记账:{{item.account}}</text>
				</view>
			</view>
		</template>
		<NoData v-else></NoData>
	</view>
</template>

<script>
	import {
		getFansList
	} from '@/request/api/fansInfo.js'
	import NoData from '@/components/Nodata.vue'
	export default {
		name: 'fans',
		components: {
			NoData
		},
		data() {
			return {
				fans: [{
					userName: '', //姓名
					phone: '', //电话
					fansNumber: '', //粉丝数
					account: '', //今日记账
				}],
				sum:'',//团队人数
				count: '',//今天完善信息人数
			}
		},
		methods: {
			async getFans() {
				const res = await getFansList()
				if (res.data.fans) {
					this.fans = res.data.fans
					this.sum = res.data.sum
					this.count = res.data.count
				}
			}
		},
		mounted() {
			this.fans = []
			this.getFans()
		}
	}
</script>

<style scoped>
	.fashin_head {
		width: 100%;
		height: 70px;
		align-items: center;
		justify-content: space-around;
		background-image: linear-gradient(90deg, #2c7fd9, #4fa1f3);
		display: flex;
		flex-direction: row;
	}

	.fashin_head .fashin_head_item {
		justify-content: center;
		align-items: center;
		display: flex;
		flex-direction: column;
	}

	.fashin_head_item text {
		font-size: 15px;
		font-weight: 400;
		color: #fff;
		line-height: 23px;
	}

	.fashinList-item {
		background-color: #fff;
		padding: 10px 15px;
		border-bottom: 1px solid #eee;
		display: flex;
		flex-direction: column;
	}

	.fashinList-item .item_1 {
		justify-content: space-between;
		display: flex;
		flex-direction: row;
	}

	.fashinList-item .item_1 text {
		font-size: 15px;
		font-weight: 400;
		color: #333;
		line-height: 23px;
	}
</style>